<template>
    <div>
        <i-table stripe border :loading="loading" :columns="table.header" :data="table.body"/>
        <page class="pager"
              show-sizer
              :current="page.page"
              :total="page.total"
              @on-change="pageFn"
              @on-page-size-change="pageSizeChangeFn"
              prev-text="上一页"
              next-text="下一页"/>
    </div>
</template>

<script>
    import API from '../lib/API_PATH'

    export default {
        name: "cmsTable",
        props: {
            searchData: {
                type: Object,
                default() {
                    return {}
                }
            },
            columns: {
                type: Array,
                default() {
                    return []
                }
            },
            data: {
                type: Array,
                default() {
                    return []
                }
            },
            url: String
        },
        data() {
            return {
                page: {
                    total: 0,
                    page: 1,
                    limit: 10
                },
                loading: false,
                table: {
                    header: [],
                    body: []
                }
            }
        },
        created() {
            this.table.header = this.columns
            this.table.body = this.data
            this.getList()
        },
        methods: {
            async getList() {
                this.loading = true
                const par = {
                    page: this.page.page,
                    limit: this.page.limit
                }
                const params = Object.assign(par, this.searchData)
                try {
                    const {data} = await this.$http(API[this.url], {params})
                    console.log(data)
                    this.table.body = data.list
                    this.page.total = data.total
                    this.page.page = parseInt(data.page)
                } catch (e) {
                    console.error(e)
                }
                this.loading = false
            },
            pageFn(v) {
                this.page.page = v
                this.getListFn()
            },
            pageSizeChangeFn(v) {
                this.page.limit = v
                this.getList()
            },
        }
    }
</script>

<style scoped>

</style>
